<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 商铺名称：</p>
        <el-input v-model="queryParams.storeName" placeholder="请输入商铺名称"></el-input>
      </el-col>
      <el-col :span="4">
        <p class="label-form"> 手机号：</p>
        <el-input v-model="queryParams.phone" placeholder="请输入商铺名称"></el-input>
      </el-col>
      <el-col :span="6">
        <p class="label-form"> 时间：</p>
        <el-date-picker
          clearable
          v-model="createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect" icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>



    <el-table :data="tableData" max-height="600" border style="margin-top: 30px">
      <el-table-column prop="storeName" min-width="200" label="商铺名称"></el-table-column>
      <el-table-column prop="name" min-width="200" label="负责人"></el-table-column>
      <el-table-column prop="phone" width="200"  label="联系方式 "></el-table-column>
      <el-table-column prop="address" min-width="200"  label="店铺地址"></el-table-column>

      <el-table-column prop="cover" min-width="200"  label="店铺照片">
        <template slot-scope="scope">
          <el-image style="height: 50px"
                    :src="scope.row.cover"
                    :preview-src-list="[scope.row.cover]"
                    ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="cover" min-width="200"  label="营业执照">
        <template slot-scope="scope">
          <el-image style="height: 50px"
                    :src="scope.row.license"
                    :preview-src-list="[scope.row.license]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column min-width="150"  prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag  :type="scope.row.status===0 ? 'primary':scope.row.status===1 ? 'success':'danger'">
            {{ status(scope.row.status) }}
          </el-tag>

        </template>
      </el-table-column>
<!--      <el-table-column prop="ext" min-width="200" show-overflow-tooltip  label="补充信息"></el-table-column>-->
      <el-table-column min-width="200"  prop="status" label="申请时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="300" align="center" label="操作">
        <template slot-scope="scope">
<!--          <el-tag type="success" size="mini" v-if="scope.row.status ===1" >审核通过</el-tag>-->
          <el-button type="primary" size="mini" icon="el-icon-view" @click="viewShop(scope.row)">查看</el-button>
          <el-button v-if="scope.row.status ===0" size="mini" type="success" icon="el-icon-success" @click="checkedOrder(scope.row)">审核通过</el-button>
          <el-button v-if="scope.row.status ===0" type="primary" size="mini" icon="el-icon-edit" @click="reject(scope.row)">驳回</el-button>
          <el-button type="primary" size="mini" icon="el-icon-view" v-if="scope.row.status >1" @click="getReply(scope.row)">查看理由</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="店铺申请"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商铺名称">
          <el-input v-model="form.storeName"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <!--        <el-form-item label="轮胎品牌">-->
        <!--          <el-select-->
        <!--            style="width: 100%;"-->
        <!--            v-model="form.brand"-->
        <!--            multiple-->
        <!--            clearable-->
        <!--            placeholder="请选择轮胎">-->
        <!--            <el-option-->
        <!--              v-for="item in optionsBrand"-->
        <!--              :key="item.id"-->
        <!--              :label="item.name"-->
        <!--              :value="item.id">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="店铺地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="店铺照片">
<!--          <lz-upload :limit="1" :img-src="form.cover" @uploadImage="uploadImage"></lz-upload>-->
          <el-image :src="form.cover" style="height:150px"></el-image>
          <!--          <image-upload :limit="1" :isShowTip="false" v-model="form.cover"></image-upload>-->
        </el-form-item>
        <el-form-item label="营业执照">
          <!--          <lz-upload :limit="1" :img-src="form.cover" @uploadImage="uploadImage"></lz-upload>-->
          <el-image :src="form.license" style="height:150px"></el-image>
          <!--          <image-upload :limit="1" :isShowTip="false" v-model="form.cover"></image-upload>-->
        </el-form-item>
        <el-form-item label="店铺地址">
          <baidu-map
            @click="setMark"
            class="map"
            style="display: flex; flex-direction: column"
            :center="center"
            :zoom="15"
            :scroll-wheel-zoom="true">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-marker
              :position="mark"
              :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
              <bm-label
                :content="content"
                :labelStyle="{color: 'red', fontSize : '12px'}"
                :offset="{width: -35, height: 30}"/>
            </bm-marker>
            <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
          </baidu-map>
        </el-form-item>
<!--        <el-form-item label="补充信息">-->
<!--          <el-input type="textarea" v-model="form.ext"></el-input>-->
<!--        </el-form-item>-->

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="isEdit || isAdd" @click="cancel">取消</el-button>
        <el-button v-if="isEdit && !isAdd" type="primary" @click="updateForm">审核通过</el-button>
        <el-button v-if="!isEdit && !isAdd" type="primary" @click="cancel">关闭</el-button>
      </span>
    </el-dialog>


    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />

    </div>
    <div class="safe"></div>
  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";
import {
  deleteStore,
  getStoreArray,
  getStoreList,
  getTyreList,
  getUserList,
  insertShop, storeApplicationList, updateApplicationStatus,
  updateShopStore, updateShopVerify, updateUserInfo
} from "@/api/apiFox";

export default {
  data() {
    return {
      currentPage1: 5,
      createTime:[],
      value1: '',
      pager:{
        total:100
      },
      form: {},
      dialogVisible: false,
      isEdit: false,
      isAdd:false,
      center: {lng: 117.404, lat: 35.915},
      mark: {lng: '', lat: ''},
      content:"",
      location: '',
      keyword: '',
      tableData: [],
      options: [
        {value: 0, label: '全部'},
        {value: 1, label: '禁用'},
        {value: 2, label: '启用'},
      ],
      optionsBrand:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
        storeName:"",
        phone:""
      }
    }
  },
  mounted() {
    this.getLists(this.queryParams)
  },
  watch:{
    createTime(newValue,oldValue){
      console.log(newValue)
      if (newValue && newValue.length>0){
        this.queryParams.beginTime = parseTime(newValue[0])
        this.queryParams.endTime = parseTime(newValue[1])
      }else{
        this.queryParams.beginTime = null
        this.queryParams.endTime =null
      }
    }
  },
  created() {
    this.getBaseInfo()
  },
  methods: {
    getSelect(){
      this.getLists(this.queryParams)
    },

    cancel(){
      this.form={}
      this.isAdd=false
      this.isEdit=false
      this.getLists(this.queryParams)
      this.mark = {lng: "", lat: ""}
      this.center ={lng: "", lat: ""}
      this.dialogVisible=false
    },

    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        storeName:"",
        phone:""
      }
      this.getLists(this.queryParams)
    },

    checkedOrder(item){
      console.log(item)
      this.$confirm('是否通过审核', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateShopVerify({id:item.id,status:1}).then(res=>{
          updateUserInfo({id:item.userId,role:3}).then(res=>{
            this.$message.success('已处理')
            this.getLists(this.queryParams)
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    reject(row){
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(({ value }) => {
        updateShopVerify({id:row.id,status:2,ext:value}).then(res=>{
          this.$message.success('已驳回')
          this.getLists(this.queryParams)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    getReply(row){
      this.$alert(row.ext, '驳回理由', {
        confirmButtonText: '确定',
        callback: action => {
          // this.$message({
          //   type: 'info',
          //   message: `action: ${ action }`
          // });
        }
      });
    },

    getBaseInfo(){
      getTyreList().then(res=>{
        this.optionsBrand = res
      })
      getStoreList().then(res=>{
        this.optionsStore = res
      })

    },
    parseTime,
    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    getLists(params) {
      storeApplicationList(params).then(res=>{
        console.log(res)
        this.pager.total=res.total
        this.tableData =res.rows
      })
    },

    uploadImage(e){
      this.form.cover = e
    },

    submitAdd(){
      console.log(this.form)
      if (!this.form.name){
        this.$message.error('商铺名称必填')
        return
      }
      if (!this.form.phone){
        this.$message.error('联系方式必填')
        return
      }
      if (!this.form.address){
        this.$message.error('店铺地址必填')
        return
      }
      if (!this.form.cover){
        this.$message.error('店铺照片必填')
        return
      }
      if (!this.form.latitude){
        this.$message.error('请选择位置')
        return
      }
      if (!this.form.opentime){
        this.$message.error('开启时间必填')
        return
      }
      if (!this.form.closetime){
        this.$message.error('关闭时间必填')
        return
      }
      insertShop(this.form).then(res=>{
        this.$message.success('新增成功')
        this.cancel()
      })
    },

    updateForm(){
      updateShopStore(this.form).then(res=>{
        this.$message.success('修改成功')
        this.cancel()
      })
    },

    setMark(e) {
      console.log(e)
      this.$message.warning('审核不允许更改别人的地址哦～')
      // this.mark = {lng: e.point.lng, lat: e.point.lat}
      // this.form.latitude = e.point.lat
      // this.form.longitude = e.point.lng
      // this.reverseGeocode(e.point.lat,e.point.lng)
    },
    updateShop(item) {
      console.log(item)
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.form.status = 1
      this.form.cover = ""
      this.mark = {lng: "", lat: ""}
      this.center ={lng: "", lat: ""}
      this.isEdit = false
      this.isAdd=true
    },

    deleteShop(item){
      deleteStore(item.id).then(res=>{
        this.$message.success('删除成功')
        this.getLists(this.queryParams)
      })
    },


    reverseGeocode(lat, lon) {
      axios(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`)
        .then(data => {
          console.log(data.data.address);
          this.content =
            data.data.address.state + '-'+data.data.address.city
          this.form.address = this.content
        })
        .catch(error => console.error('Error:', error));
    },
    handleClose() {
      this.dialogVisible = false
    },
    status(val) {
      switch (val) {
        case 0: {
          return '待审核'
        }
        case 1: {
          return '通过 '
        }
        case 2: {
          return '驳回'
        }
        case 3: {
          return '驳回'
        }
      }
    }
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
